<template>
    <div>
        <div class="article_all">
            <div style="width: 100%;">
                <div class="article_body">
                    <el-table :data="bulletinList" height="460px" style="margin-top: 16px;font-size: 14px;"
                              :header-cell-style="{ background: '#EBEEF2' }" :row-style="{ height: '80px' }"
                              v-loading="loading">
                        <el-table-column prop="id" label="公告ID" min-width="100"></el-table-column>
                        <el-table-column prop="guserName" label="发布人" min-width="120"></el-table-column>
                        <el-table-column prop="title" label="公告标题" min-width="200"></el-table-column>
                        <el-table-column prop="createTime" label="发布时间" min-width="160"></el-table-column>
                        <el-table-column label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" @click="onEditBulletin(scope.row)">
                                    <i class="el-icon-edit"></i>
                                </el-button>
                                <el-button size="mini" type="text" @click="onDeleteBulletin(scope.row)" style="color: red;">
                                    <i class="el-icon-delete"></i>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="pagination">
                    <el-button
                            type="primary"
                            class="publish"
                            margin-top="20px"
                            @click="toPublishBulletin"
                    >
                        发布公告
                    </el-button>
                    <el-pagination
                            :current-page.sync="PageNumber"
                            :page-size="PageSize"
                            layout="prev, pager, next, total"
                            :total="total"
                            background
                            @current-change="handlePageChange"/>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import {adminbulletinlist} from "@/api/api";

export default {
    name: 'Laucher',
    data() {
        return {
            bulletinList: [],
            PageNumber: 1,
            PageSize: 5,
            total: 0,
            loading: false
        }
    },
    methods: {
        toPublishBulletin() {
            this.$router.push('/admin/adminBulletin/publish'); // 根据您的路由配置调整路径
        },
        async getBulletinList() {
            this.loading = true;
            try {
                const response = await adminbulletinlist({
                    PageNumber: this.PageNumber,
                    PageSize: this.PageSize
                });
                console.log(response.data);
                if (response.data.message === "成功") {
                    this.bulletinList = response.data.data.list;
                    this.total = response.data.data.total;
                }
            } catch (error) {
                console.error('获取用户列表失败:', error);
            } finally {
                this.loading = false;
            }
        },
        handlePageChange(page) {
            this.PageNumber = page;
            this.getBulletinList();
        }
    },
    created() {
        this.getBulletinList();
    }
}
</script>

<style scoped>
.article_head_left ::v-deep .el-input--suffix .el-input__inner {
    border-radius: 10px;
    box-shadow: 0 0 1px #7e72f2;
}
.pagination ::v-deep .el-pagination .el-pager .number.active {
    background-color: #456ddc !important;
    border-color: #456ddc !important;
    color: white !important;
}
.pagination ::v-deep .el-pagination .el-pager .number {
    color: #456ddc !important;
}
.pagination ::v-deep .el-pagination {
    position: relative;
}
.pagination {
    width: 93%;
    display: flex;
    align-items: center;
    justify-content: right;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #456ddc;
    border-color: #456ddc;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #456ddc;
    border-color: #456ddc;
}
::v-deep .el-checkbox__inner:hover {
    border-color: #456ddc;
}
.publish{
    margin-top: 30px;
}
</style>

